<template>
  <div style="height:100%">
    <div style="display: flex;flex-direction: column;height: 100%;width: 100%;">
      <div class="FormBoListStylize3">
        <div class="FormBoListStylize3-common">
          <div style="flex: 1;overflow: auto">
            <table class="rx-card-item-table">
              <thead>
              <tr class="thead-tr" :style="{'background':mobileStyleList.headBackground}">
                <th v-if="isDialog=='YES' || formBoListData.hasSelect" class="rx-card-item-table-left"
                    :style="{'background':mobileStyleList.headBackground,'border':(mobileStyleList.cutOffRuleShow?'1px solid '+ mobileStyleList.cutOffRuleColor:'')}">
                  <radio style="transform:scale(0.7)" v-if="!multiSelect"/>
                  <checkbox style="transform:scale(0.7)" v-else/>
                </th>
                <th :style="{'border':(mobileStyleList.cutOffRuleShow?'1px solid '+ mobileStyleList.cutOffRuleColor:'')}"
                    v-for="time in mobileConf.mobileCols">
                  <div
                      :style="{'color':mobileStyleList.headColor,'font-size':mobileStyleList.headFontSize + 'px','text-align':mobileStyleList.listAligning,'width':time.isWidth+'px'}"
                      class="table-common" :class="[mobileStyleList.headTypeface=='normal'?'size-normal':'']">
                    {{ $i18(time["i18nJson"] || time.header) }}
                  </div>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(list,index) in dataList" @click="buttonTD(list)">
                <td v-if="isDialog=='YES' || formBoListData.hasSelect" class="rx-card-item-table-left"
                    :style="{'border':(mobileStyleList.cutOffRuleShow?'1px solid '+ mobileStyleList.cutOffRuleColor:'')}">
                  <radio style="transform:scale(0.7)" v-if="!multiSelect" @click="change(list)"
                         :checked='checked(list)'/>
                  <checkbox style="transform:scale(0.7)" v-else @click="change(list)" :checked='checked(list)'/>

                </td>
                <td :style="{'border':(mobileStyleList.cutOffRuleShow?'1px solid '+ mobileStyleList.cutOffRuleColor:''),'background':(backShowe(index) && mobileStyleList.listZebraShow? mobileStyleList.listZebraColor:'')}"
                    v-for="time in mobileConf.mobileCols">
                  <div
                      :style="{'color':mobileStyleList.listColor,'font-size':mobileStyleList.listFontSize + 'px','text-align':mobileStyleList.listAligning,'width':time.isWidth+'px'}"
                      class="table-common"
                      :class="{'table-common-0':mobileStyleList.listDiction==0,'table-common-1':mobileStyleList.listDiction==1,'table-common-2':mobileStyleList.listDiction==2}">
                    <RxListField :item="list" :index="index" :col="time"></RxListField>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
            <div v-if="totalCount ==0" style="text-align:center">{{$ti18('rxList.noDataNow','暂无数据')}}</div>
          </div>
          <div class="paging-button" v-if="totalCount>0">
            <div class="paging-button-left">{{ i18n('total', '总计') }}{{ totalCount }}{{ $ti18('rxList.record', '条') }}
            </div>
            <div class="paging-button-right">
              <div class="paging-button-right-iconfont" @click="previous"><my-icon type="icon-icon-test39"></my-icon></div>
              <div id="MainHead" class="paging-button-select" @click="pagingShow=!pagingShow">
                <div v-if="pagingShow" class="paging-button-select-la">
                  <div @click.stop="skip(i)" v-for="i in total">{{ i }}</div>
                </div>
                <div style="margin-right:5px">{{ pageNo }}</div>
              </div>
              <div class="paging-button-total">/{{ total }}</div>
              <div class="paging-button-right-iconfont" @click="next"><my-icon type="icon-icon-test41"></my-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <uni-popup ref="popup" type="bottom">
      <div style="background: white">
          <template v-for="(button,index) in buttonList" :key="index">
              <div class="form-button"  v-if="btnShow(item,button)" @click="mobileBottom(button)">
                  <span v-if="button.i18nJson">{{ $i18(button.i18nJson) }}</span><span v-else>{{ button.btnLabel }}</span>
              </div>
          </template>
      </div>
    </uni-popup>
  </div>
</template>

<script>
import RxListField from "./common/RxListField";

export default {
  name: "FormBoListStylize3",
  data() {
    return {
      item: {},
      pagingShow: false,
      checkedId: [], //选中列表的id
      checkeds: [],
      user:uni.getStorageSync("user")
    }
  },
  components: {
    RxListField,
  },
  props: {
    dataList: {
      type: Array,
      default() {
        return []

      }
    },
    mobileStyleList: {
      type: Object,
      default() {
        return {};
      }
    },
    mobileConf: {
      type: Object,
      default() {
        return {};
      }
    },
    isDialog: '',
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    buttonList: {
      type: Array,
      default() {
        return []
      }
    },
    totalCount: {
      type: Number,
      default() {
        return 0
      }
    },
    total: {
      type: Number,
      default() {
        return 0
      }
    },
    pageNo: {
      type: Number,
      default() {
        return 0
      }
    },
    multiSelect: {
      type: Boolean,
      default: true
    },
    idField: {
      type: String,
      default: 'idx_'
    },
      formBoListData:{
          type: Object
      }
  },
  created() {
  },
  methods: {
    i18n(name, text, key) {
      return this.$ti18(name, text, "formBoListStylizeLang", key);
    },
    // 判断选中是否选中
    checked(item) {
      if (this.checkedId.includes(item[this.idField])) {
        return true
      } else {
        return false
      }
    },
    change(item) {
      if (!this.multiSelect) {
        this.checkedId = [];
        this.checkedId.push(item[this.idField]);
        this.checkeds.push(item);
      } else {
        if (this.checkedId.includes(item[this.idField])) {
          this.checkedId = this.checkedId.filter(res => {
            if (res != item[this.idField]) {
              return res
            }
          })

        } else {
          this.checkedId.push(item[this.idField]);
          this.checkeds.push(item);
        }
      }
      this.$emit('change', item)
    },
    skip(index) {
      this.pagingShow = false;
      this.$emit('skip', index)
    },
    backShowe(index) {
      if (index % 2 === 1) {
        return true
      } else {
        return false
      }
    },
    buttonTD(obj) {
      if (this.buttonList && this.buttonList.length > 0) {
        this.item = obj;
        this.$refs.popup.open()
      }
    },
    mobileBottom(obj) {
      this.$refs.popup.close()
      this.handMethod(obj)
    },
    //下一页
    next() {
      if (this.pageNo < this.total) {
        this.$emit('next', 'list')
      }
    },
    //上一页
    previous() {
      if (this.pageNo > 1) {
        this.$emit('previous')
      }
    },
    handMethod(btn) {
      //在FormBoListPreviewList.vue页面使用
      this.$eventBus.$emit('handMethod', btn,this.item);
      this.$refs.popup.close()
    },
      btnShow(row,btn){
          if(!btn.isSetedShowCondition){
              return true
          }
          let isShow = this.checkRightByDialogButton(btn, row)
          return  isShow
      },
      /**
       * 根据条件判断按钮是否显示
       * @param {Object} btn 按钮对象
       * @param {Object} row 一行数据对象
       */
      checkRightByDialogButton(btn, row) {
          if (!btn.btnShow) {
              return true;
          }
          let fn = new Function("row", "user", "btn", btn.btnShow);
          let rtn = fn(row, this.user, btn);
          return rtn;
      },

  }
}
</script>

<style scoped>
.FormBoListStylize3-common {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
  border: 13px solid white;
  background: white;
  border-radius: 5px;
  overflow: scroll;
  height: calc(100% - 3rem);
}

.paging-button-total {
  color: #505050;
}

.paging-button-right-iconfont {
  width: 2rem;
  height: 2rem;
  background-color: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(170, 170, 170, 0.28);
  border-radius: 3px;
  color: #909090;
  text-align: center;
  line-height: 2rem;
  margin-top: .5rem;
  margin-right: 12px;
  margin-left: 12px;
}

.paging-button-select-la {
  position: absolute;
  bottom: 2.5rem;
  max-height: 10rem;
  left: 0;
  right: 0;
  background-color: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(170, 170, 170, 0.28);
  border-radius: 3px;
  color: #909090;
  overflow: scroll;
}

.paging-button-select {
  position: relative;
  display: flex;
  height: 2rem;
  background-color: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(170, 170, 170, 0.28);
  border-radius: 3px;
  color: #303030;
  text-align: center;
  line-height: 2rem;
  margin-top: .5rem;
  padding: 0px 10px;
  margin-right: 12px;
}

.paging-button-left {
  line-height: 3rem;
  font-size: .9rem;
  color: #505050;
  flex: 1;
  margin-left: .5rem;
}

.paging-button {
  display: flex;
  background: white;
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  font-size: .9rem;
}

.paging-button-right {
  display: flex;
}

.form-button {
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  font-size: 1rem;
}

.size-normal {
  font-weight: 500;
}

.checkbox-left {
  width: 100%;
  height: 100%;
  align-items: center;
}

.table-common {
  min-width: 2rem;
  overflow: hidden;
  padding: 0px 5px;
}

.table-common-0 >>> div {
  overflow: hidden;
  word-break: break-all;
}

.table-common-1 >>> div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.table-common-2 >>> div {
  overflow: hidden;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.FormBoListStylize3 {
  width: calc(100% - 1rem);
  margin: auto;
  height: 100%;
}

table {
  border-collapse: collapse;
}

.rx-card-item-table {
  background: white;
  table-layout: fixed;
  margin: auto;
  z-index: 9999;

}

.rx-card-item-table tr {
  text-align: center;
}

.rx-card-item-table tr th {
  height: 43px;
  padding: 0px 10px;
  word-wrap: break-word;
}

.thead-tr {
  position: sticky;
  z-index: 1;
  top: 0px;
}

.rx-card-item-table-left {
  width: 2rem;
  position: sticky;
  left: 0px;
  padding: 0px 5px;
  z-index: 9;

}

.rx-card-item-table tr td {
  padding: 8px 10px;
  background: white;
  word-wrap: break-word;
}
</style>
